import React from "react";
import Footer from "@/components/common/Footer";

const Index = () => {

    // 初始化一个路由方法
    let navigate = React.Router.useNavigate();

    const [business,setBusiness] = React.useState(React.Cookies.load('business') ? React.Cookies.load('business') : {});
    const [count,setCount] = React.useState({
        ProductCount:0,
        CateCount:0,
        OrderCount:0
    });

    React.useEffect(() => {

        getCountData();

    },[]);

    // 获取数据总数
    const getCountData = async () => {
        let data = {
            busid:business.id
        }

        let result = await React.Api.index(data);

        if(result)
        {
            if(result.code === 1)
            {
                setCount(result.data);
            }else{
                React.Vant.Notify.show({
                    type:'warning',
                    message:'非法登录',
                    duration:1500,
                    onClose:() => {
                        React.Cookies.remove('business');
                    }
                })
            }
        }
    }

    const Email = () => {
        if(business.auth === '0')
        {
            return (
                <div className="my_dind">
                    <div className="bt">
                        {/* <a href="my_fk.html"> */}
                        <React.Router.NavLink to='/business/base/email'>
                            <h3><img src="/assets/images/my_x_01.png" alt="img" />邮箱认证</h3>
                            <div className="right"> 
                                <img src="/assets/images/right_jiant.png" alt="img" />
                            </div> 
                        {/* </a> */}
                        </React.Router.NavLink>
                    </div>
                </div>
            )
        }
    }

    const onLogout = () => {
        React.Vant.Dialog.confirm({
            title:'退出账号',
            message:'是否确认退出当前账号？'
        }).then(() => {
            React.Vant.Notify.show({
                type:'success',
                message:'退出成功',
                duration:1500,
                onClose:() => {
                    React.Cookies.remove('business',{path:'/'});

                    navigate('/business/base/login');
                }
            })
        }).catch(() => {
        });
    }

    return (
        <>
            <div className="my_kuang">
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <img id="Dfgrg" style={{height:"1.1rem"}} src={business.avatar_cdn} alt="" />
                            
                        </div>
                        <div className="mingz">
                            <h2>{business.nickname ? business.nickname : business.mobile_text}</h2>  
                        </div>
                    </div>
                </div> 
                <div className="div_bx_k">
                    <div className="neir_Ef"> 
                        <div className="yverjif">
                            <ul>
                                <li>
                                    <React.Router.NavLink to=''>
                                        <h2>{count.ProductCount}</h2>
                                        <p>收藏商品</p>
                                    </React.Router.NavLink>
                                </li>
                                <li>
                                    <React.Router.NavLink to="">
                                        <h2>{count.CateCount}</h2>
                                        <p>收藏文章</p>
                                    </React.Router.NavLink>
                                </li>
                                <li>
                                    <React.Router.NavLink to=''>
                                        <h2>{count.OrderCount}</h2>
                                        <p>订单</p>
                                    </React.Router.NavLink>
                                </li>
                            </ul>
                        </div>
                        
                        <div className="list_index_my">
                            <div className="fenh_ziyek">
                                <h3>更多服务 </h3>
                            </div>
                            <div className="my_dind">
                                <div className="bt">
                                    <React.Router.NavLink to="/business/base/profile">
                                        <h3><img src="/assets/images/my_x_01.png" alt="img" />基本资料</h3>
                                        <div className="right"> 
                                            <img src="/assets/images/right_jiant.png" alt="img" />
                                        </div> 
                                    </React.Router.NavLink>
                                </div>
                            </div>

                            <Email />

                            <div className="my_dind">
                                <div className="bt">
                                    <a href="my_fk.html">
                                        <h3><img src="/assets/images/my_x_01.png" alt="img" />消费记录</h3>
                                        <div className="right"> 
                                            <img src="/assets/images/right_jiant.png" alt="img" />
                                        </div> 
                                    </a>
                                </div>
                            </div>

                            <div className="my_dind">
                                <div className="bt">
                                    <a href="my_fk.html">
                                        <h3><img src="/assets/images/my_x_01.png" alt="img" />意见反馈</h3>
                                        <div className="right"> 
                                            <img src="/assets/images/right_jiant.png" alt="img" />
                                        </div> 
                                    </a>
                                </div>
                            </div> 
                            <div className="my_dind">
                                <div className="bt">
                                    <a href="my_guan.html">
                                        <h3><img src="/assets/images/my_x_02.png" alt="img" />关于我们</h3>
                                        <div className="right"> 
                                            <img src="/assets/images/right_jiant.png" alt="img" />
                                        </div> 
                                    </a>
                                </div>
                            </div>

                            <div className="my_dind">
                                <div className="bt">
                                    <a onClick={onLogout}>
                                        <h3><img src="/assets/images/my_x_01.png" alt="img" />退出账号</h3>
                                        <div className="right"> 
                                            <img src="/assets/images/right_jiant.png" alt="img" />
                                        </div> 
                                    </a>
                                </div>
                            </div>
                        </div> 
                        {/* <div style="height: .9rem;"></div>  */}
                    </div>
                    
                </div> 
            </div>

            {/* 底部导航 */}
            <Footer />
        </>
    )
}

export default Index;